<template>
    <view class="song-detail-container">
        <view class="vague-wrapper  flex align-center">
            <image src="../../static/background.png" class="background-img"></image>
            <view class="absolve-wrapper">
                <cu-custom class="head-title" :isBack="true" bgColor="unset">
                    <block slot="content">全部音乐</block>
                </cu-custom>
                <view class="day-recommend-info" :style="{ 'padding-top': CustomBar + 'px' }">
                    <image :src="bgImg" mode="widthFix" class="bgImg"></image>
                    <view class="song-info">
                        <view class="name text-overflow">全部音乐</view>
                        <view class="content" v-if="currentPlayList.creator">
                            <image :src="bgImg" mode="" class="avatar">
                            </image>
                            {{ currentPlayList.creator.nickname }}
                        </view>
                        <view class="description" v-if="description">
                            简介：{{ description }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="recommend-main" :class="{ hasPlayInfo: playInfo.id }">
            <view class="recommend-list">
                <view class="music-title" @click="handlePlayAllMusic">
                    <text class="iconfont icon-kaishi3 basic-icon-color playIcon"></text>
                    全部播放
                    <text class="light-text">(共{{ allMusicList.length }}首)</text>
                </view>
                <musicList :all-music-list="allMusicList" v-if="allMusicList &&allMusicList.length >0" />
            </view>
        </view>
        <music-control v-if="playInfo.id" />
    </view>
</template>

<script>
    import {
        getImage,
        getName
    } from '@/utils/index.js';
    import {
        mapState
    } from 'vuex';
    import musicList from '@/components/musicList/index.vue'
    export default {
        data() {
            return {
                //解释
                description: '音乐中心里的全部音乐',
                currentPlayList: {},
                //所有音乐的列表
                allMusicList: [],
                //当前音乐列表
                musicList: [],
                bgImg: '@/static/image/muhsic/cover.png',
                CustomBar: this.CustomBar - 15,
                //虚拟可视列表参数
                virtualListConfig: {
                    //每条数据所占高度 px
                    itemHeight: 75,
                    //每次加载到可视区域的数量，itemHeight X showNum 要可视区域高度 ，否则页面滚动不了。
                    showNum: 30,
                    //偏移量
                    top: 0,
                    //卷起的高度
                    scrollTop: 0,
                    //可视区域第一条数据的索引
                    startIndex: 0,
                    //可视区域最后一条数据后面那条数据的的索引，因为后面要用slice(start,end)方法取需要的数据，但是slice规定end对应数据不包含在里面    
                    endIndex: 0,
                }
            };
        },
        components: {
            musicList
        },
        onLoad(val) {

        },
        /**
         * 下拉刷新
         */
        onPullDownRefresh() {
            let _this = this
            this.allMusicList = []
            this.musicList = []
            this.$cache.loadAllMusicList = null
            uni.removeStorageSync('loadAllMusicList')
            this.loadAllMusicList(function() {
                uni.stopPullDownRefresh()
            })
        },
        mounted() {
            this.loadAllMusicList()
        },
        computed: mapState({
            playInfo: state => state.playInfo
        }),
        methods: {
            /**
             * 加载全部音乐
             */
            loadAllMusicList(backFun) {
                let tmpList = this.$cache.loadAllMusicList
                if (tmpList && tmpList.length > 0) {
                    this.allMusicList = tmpList
                    if (backFun && typeof(backFun) == 'function') {
                        backFun()
                    }
                    return;
                }
                tmpList = uni.getStorageSync('loadAllMusicList')
                console.log('loadAllMusicList', tmpList, tmpList.length)
                if (tmpList && tmpList.length > 0) {
                    this.allMusicList = tmpList
                    if (backFun && typeof(backFun) == 'function') {
                        backFun()
                    }
                    return;
                }
                uni.showLoading({
                    title: '加载中...'
                });
                this.$post('/api/music/getAllMusic', {}).then(res => {
                    uni.hideLoading();
                    console.log('加载全部音乐', res.result.length, res)
                    this.allMusicList = res.result || [];
                    this.$cache.loadAllMusicList = this.allMusicList
                    console.log('保存缓存loadAllMusicList', this.allMusicList.length)
                    uni.setStorageSync('loadAllMusicList', this.allMusicList)
                    if (backFun && typeof(backFun) == 'function') {
                        backFun()
                    }
                }).catch(err => {
                    uni.hideLoading();
                })
            },
            //点击播放
            handlePlayMusic(val) {
                if (this.playInfo.id == val.id) {
                    uni.navigateTo({
                        url: '../play/index'
                    });
                    return;
                }
                this.$store.dispatch('playMusic', this.$getPlayData(val));
            },

            //播放全部
            handlePlayAllMusic() {
                const list = this.musicList.map(item => {
                    return {
                        src: '',
                        title: item.name,
                        singer: getName(item),
                        coverImgUrl: getImage(item),
                        id: item.id
                    };
                });
                this.$store.dispatch('playAllMUsic', list);
            },
            /**
             * 显示一部分音乐
             */
            showMusicList() {
                let pageSize = this.$cache.virtualListConfig.showNum
                let start = this.musicList.length
                console.log('显示一部分音乐', pageSize, start, this.allMusicList.length, this.allMusicList)
                for (let i = start; i < this.allMusicList.length; i++) {
                    if (i >= pageSize + start) {
                        break
                    }
                    this.musicList.push(this.allMusicList[i])
                }
                this.$forceUpdate()
            }
        }
    };
</script>

<style lang="scss" scoped>
    .song-detail-container {
        width: 100%;
        height: 100%;

        .vague-wrapper {
            height: 30%;
            width: 100%;
            position: relative;

            .background-img {
                width: 100%;
                height: 100%;
            }

            .absolve-wrapper {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
            }

            .head-title {
                color: #fff;
                position: absolute;
                top: 0;
                width: 100%;
                z-index: 9999;
            }

            .day-recommend-info {
                box-sizing: border-box;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;

                .bgImg {
                    width: 200rpx;
                    border-radius: 8px;
                    margin-right: 20px;
                }

                .song-info {
                    margin-bottom: 12rpx;
                    color: #fff;
                    max-width: calc(100% - 175px);

                    .name {
                        font-size: 32rpx;
                    }

                    .content {
                        margin: 15rpx 0;
                        color: #fff;

                        .avatar {
                            width: 25px;
                            height: 25px;
                            border-radius: 50%;
                            display: inline-block;
                            vertical-align: middle;
                            margin-right: 6px;
                        }
                    }

                    .description {
                        font-size: 24rpx;
                        color: #e1d7f0;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        line-height: 18px;
                    }
                }
            }
        }

        .recommend-main {
            height: 70%;
            width: 100%;
            position: relative;

            &.hasPlayInfo {
                height: calc(70% - 110rpx);
            }

            .recommend-list {
                position: absolute;
                top: -5%;
                left: 0;
                right: 0;
                bottom: 0;
                background: #fff;
                border-top-left-radius: 26px;
                border-top-right-radius: 26px;

                .music-title {
                    padding-left: 20px;
                    margin: 15px 0;
                    box-sizing: border-box;
                    color: #000;
                    font-size: 32rpx;
                    font-weight: 600;

                    .playIcon {
                        margin-right: 8px;
                        font-size: 40rpx;
                    }

                    .light-text {
                        font-size: 24rpx;
                        margin-left: 6px;
                        color: rgba(0, 0, 0, 0.5);
                    }
                }

                .music-item {
                    //这里得固定高度以计算虚拟列表
                    height: 70px;
                    box-sizing: border-box;
                    padding: 0 40rpx;
                    align-items: center;
                    margin-bottom: 20rpx;
                    width: 100%;

                    &:last-of-type {
                        margin-bottom: 0;
                    }

                    &.active {
                        background-image: linear-gradient(to right, rgba(247, 73, 79, 0.1), rgba(247, 73, 79, 0.05));

                        .music-info {

                            .music-name,
                            .small-icon,
                            .music-singer {
                                color: #f84e51 !important;
                            }

                            &::before {
                                content: '';
                                width: 4px;
                                height: 65px;
                                background-image: linear-gradient(to bottom, rgb(253, 117, 102), rgb(247, 73, 79));
                                position: absolute;
                                left: 0px;
                                top: 3px;
                            }
                        }
                    }

                    .music-img {
                        width: 58px;
                        border-radius: 6px;
                    }

                    .music-info {
                        margin-left: 15px;
                        max-width: calc(100% - 75px);

                        .music-name {
                            font-size: 30rpx;
                            margin-bottom: 7px;
                            color: #000;
                        }

                        .music-singer {
                            color: rgba(0, 0, 0, 0.5);
                            font-size: 24rpx;
                            align-items: center;

                            .small-icon {
                                margin-right: 6px;
                                transform: scale(0.9);
                                color: rgba(0, 0, 0, 0.5);
                                font-size: 12px;
                                padding: 1px 3px;
                                border: 1px solid rgba(0, 0, 0, 0.2);
                                border-radius: 4px;
                            }
                        }
                    }

                    .music-icons {
                        margin-left: auto;
                        margin-right: 20rpx;

                        .iconImage {
                            width: 30rpx;
                            height: 30rpx;
                        }
                    }
                }
            }
        }
    }
</style>
